---
import Controls from "./Controls.vue";
import VueTest from "./TextContent.vue";
// import dataList from '../data/index'
const visible = false
const url = 'https://image.baidu.com/search/acjson?tn=resulttagjson&logid=9902304898151142530&ie=utf-8&fr=&word=%E5%9B%BE%E7%89%87%E5%A3%81%E7%BA%B8&ipn=r&fm=index&pos=history&queryWord=%E5%9B%BE%E7%89%87%E5%A3%81%E7%BA%B8&cl=2&lm=-1&oe=utf-8&adpicid=&st=&z=&ic=&hd=&latest=&copyright=&s=&se=&tab=&width=&height=&face=&istype=&qc=&nc=1&expermode=&nojc=&isAsync=true&pn=30&rn=30&itg=1&gsm=1e&1712627375698='
const weatherUrl = 'http://t.weather.itboy.net/api/weather/city/101010100'

// let imgArr = dataList

const response = await fetch(url);
const data = await response.json();
const arr = data.data.map(item => item.thumbURL)
// const len = arr.length
// let index = 0
// let index = Math.floor(Math.random()*((len-1) - 0))
// let img = imgArr[index]
// const obj = JSON.stringify(imgArr)

// 天气处理逻辑
let dayWeather = {}
// const weatherResponse = await fetch(weatherUrl)
// const weatherData = await weatherResponse.json()
// dayWeather = weatherData.data
try {
  const weatherResponse = await fetch(weatherUrl)
  const weatherData = await weatherResponse.json()
  // console.log(3333333333333, weatherData)
  dayWeather = weatherData.data || {}
} catch (e) {
  console.log('err', e)
}

---

<bg-img>
  {visible && <Controls></Controls>}
  <VueTest dayWeather={dayWeather} client:load></VueTest>
  <!--<img class="bg-img" src={img} alt="背景图" />-->
  <img class="bg-img" alt="背景图" />
  <div class="utils">
    <p class="set-btn">设置</p>
    <p class="util1">随机<p/>
    <p class="util2">顺序</p>
  </div>
  <div class="page"></div>
</bg-img>

<script>
  import dataList from '../data/index'
  let imgSelectArr = []
  class BgImg extends HTMLElement {
    constructor() {
      super();
      // const obj = this.dataset.obj
      // const obj = dataList
      let timer = null
      let index = 0
      utils('随机')
      function utils(type, isOne = false) {
        clearInterval(timer)
        // const arr = JSON.parse(obj)
        const arr = dataList
        const len = arr.length
        if (type && type === '顺序') {
          if (isOne) {
            index = 0
          } else {
            index++
          }
        } else {
          console.log(Math.floor(Math.random()*((len-1) - 0)))
          index = Math.floor(Math.random()*((len-1) - 0))
          if (imgSelectArr.indexOf(index) > -1) {
            index++
          }
        }
        imgSelectArr.push(index)
        imgSelectArr = [...new Set(imgSelectArr)]

        const src = arr[index]
        console.log(index, src)
        document.querySelector('.bg-img').setAttribute('src', src)
        document.querySelector('.page').innerHTML = `<span style="color: darkturquoise;">${index+1}</span> / ${len}`
        timer = setInterval(() => {
          utils('随机')
        }, 1000 * 60 * 5)
      }

      this.querySelector('.set-btn').addEventListener('click', () => {

      })
      this.querySelector('.util1').addEventListener('click', utils)
      this.querySelector('.util2').addEventListener('click', () => {
        utils('顺序')
      })
    }
  }
  customElements.define('bg-img', BgImg)
</script>

<style>
  .bg-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .utils {
    position: fixed;
    top: 200px;
    right: 0;
    color: #666;
    z-index: 6;
    width: 50px;
  }
  .utils p:hover {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
  }
  .page {
    position: fixed;
    right: 0;
    bottom: 0;
    color: #fff;
  }
  .set-btn {
    display: none;
  }
</style>
